import React, {useState, useEffect} from 'react'
import {Switch, Route, withRouter} from 'react-router-dom'
import './index.scss'
import {MainBar, SideBar} from "@/components/bar/bar";
import Area from "@/components/area/area";
import {Tag, Pagination, Carousel, message} from 'antd'
import wechatQR from '../../assets/images/wechat.jpg'
import 'antd/dist/antd.css'
import tagList from '@/common/mock/hot_tag.json'
import postData from '@/common/mock/post.json'
import BranchCate from "@/pages/home/BranchCate";
import PostCard from "@/components/PostCard";
import config from "@/config/config";
import Detail from "@/pages/detail";
import {getToken} from "@/common/util";

const wls = window.localStorage
const home = config.main.home

const visterList = [
  {"username": "12w45", "avatar": "http://xueba.it266.com:8081/default/avatar/4.jpeg"},
  {"username": "Q2222", "avatar": "http://xueba.it266.com:8081/default/avatar/0.jpeg"},
  {"username": "q111", "avatar": "http://xueba.it266.com:8081/default/avatar/3.jpeg"},
  {"username": "sss", "avatar": "http://xueba.it266.com:8081/2022/02/28/132a39bab334400cbe07075da4e4e113.jpg"},
  {"username": "222", "avatar": "http://xueba.it266.com:8081/2022/02/24/5bd12c05852046a6aca3779e304ddfc1.png"}
]

const Home: React.FC<any> = (props) => {

  const [pagedif, setPagedif] = useState(false)        // 是否隐藏分页

  const postAPost = (e: any) => {
    e.stopPropagation()
    // 未登录不让发帖子
    const token = getToken()
    if (!token) {
      message.warn('您还没有登录，请先登录')
      return
    }
    props.history.push('/post')
  }

  const switchBranch = (val: any) => {

  }

  const changePageInfo = () => {

  }

  return (
    <>
      <Switch>
        <Route exact path="/home">
          <MainBar className="home">
            <Area className="banner">
              <Carousel autoplay>
                <div>
                  <h3 className='carousel-unit'>1</h3>
                </div>
                <div>
                  <h3 className='carousel-unit'>2</h3>
                </div>
                <div>
                  <h3 className='carousel-unit'>3</h3>
                </div>
                <div>
                  <h3 className='carousel-unit'>4</h3>
                </div>
              </Carousel>
            </Area>

            <Area className="article">
              <BranchCate name='branchCate' switchBranch={switchBranch}/>
              {postData.postDtoList.map((item, index) => {
                return (
                  <PostCard key={item.post.id + ''} {...item} />
                )
              })}
              <Pagination
                key={'paginationKey'}
                className='pagination'
                showQuickJumper
                total={10}
                showSizeChanger={true}
                defaultPageSize={20}
                pageSizeOptions={[5, 10, 15, 20]}
                defaultCurrent={1}
                onChange={changePageInfo}
                disabled={pagedif}
              />
            </Area>
          </MainBar>
        </Route>
        {/* 详情页路由 */}
        <Route path={home.postLinkPrefix + wls.XB_post_id_now} component={Detail}/>
      </Switch>

      <SideBar className="home">
        <Area className="publish" title="发布">
          <div className='button-box'>
            <button className='postPost' onClick={postAPost}>发布帖子</button>
            <div className='noteText'>有分享才有进步</div>
          </div>
        </Area>

        <Area className="features" title="扫码添加作者微信">
          <div className='author-WeChat-QRCode' style={{backgroundImage: `url(${wechatQR})`}}/>
        </Area>

        <Area className="features" title="热门话题">
          <div className='tags-box'>
            {tagList.map((item: any, index) => {
              return (
                <Tag className='tags' key={index} color='orange'>{item.name}</Tag>
              )
            })}
          </div>
        </Area>

        <Area className="features" title="最近访客">
          {visterList.map((item: any, index) => {
            return (
              <div className='recent-visitors' key={index}>
                <div className='recent-visitors_avatar'>
                  <div className='avatar-box' style={{backgroundImage: `url(${item.avatar})`}}/>
                </div>
                <div className='recent-visitors_username'>
                  {item.username}
                </div>
              </div>
            )
          })}
        </Area>
      </SideBar>
    </>
  )
}

export default withRouter(Home)
